<template>
  <div class="wall" ref="wrapper">
    <el-tabs>
      <el-tab-pane label="防御统计&函数调用" :key="'1'">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :lg="12" class="col-item">
            <el-card shadow="always">
              <div slot="header">
                <span><strong>防御统计</strong></span>
              </div>
              <el-descriptions :labelStyle="{width:'30%'}" :contentStyle="{width: '20%'}" :column="2" border>
                <el-descriptions-item v-for="( key) in defenseName" :key="key">
                  <template slot="label">
                    <div class="wall-key" :title="langData(`${key}Desc`)===`${key}Desc`?'':langData(`${key}Desc`)">
                      {{ langData(key) }}
                    </div>
                  </template>
                  <div class="web-value"> {{ data[titleFirstToLowerCase(key)] }}</div>
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="12" class="col-item">
            <el-card shadow="always">
              <div slot="header">
                <span><strong>函数调用统计</strong></span>
              </div>
              <el-descriptions :labelStyle="{width:'30%'}" :contentStyle="{width: '20%'}" :column="2" border>
                <el-descriptions-item v-for="( val,key) in functionName" :key="key">
                  <template slot="label">
                    <div class="wall-key">
                      {{ val.name }}
                    </div>
                  </template>
                  <div class="web-value"> {{ val.invokeCount }}</div>
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="表访问统计" :key="'2'">
        <div class="tableRow" ref="tableRow2">
          <el-table
            :data="data.tables"
            class="dataTable"
            ref="dataTable2"
            size="small"
            border
            v-horizontal-scroll="{bottom:42}"
          >
            <el-table-column label="序号" type="index" align="center" fixed>
            </el-table-column>
            <el-table-column label="表名" align="center" prop="name" fixed/>
            <el-table-column :label="langData(titleFirstToUpperCase(key))" align="center" v-for="key in tableNames"
                             :prop="key"
                             :key="key"/>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="SQL白名单" :key="'3'">
        <div class="tableRow" ref="tableRow3">
          <el-table
            :data="data.whiteList"
            class="dataTable"
            ref="dataTable3"
            size="small"
            border
            v-horizontal-scroll="{bottom:42}"
          >
            <el-table-column label="序号" type="index" align="center" fixed>
            </el-table-column>
            <el-table-column label="SQL" align="center" prop="sql" :show-overflow-tooltip="true" fixed width="300"/>
            <el-table-column :label="langData(titleFirstToUpperCase('sample'))" align="center" prop="sample"
                             :show-overflow-tooltip="true" width="300"/>
            <el-table-column :label="langData(titleFirstToUpperCase(name))" align="center" :prop="name"
                             v-for="name in SqlWhiteNames"
                             :key="name"
            />
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="SQL黑名单" :key="'4'">
        <div class="tableRow" ref="tableRow4">
          <el-table
            :data="data.blackList"
            class="dataTable"
            ref="dataTable4"
            size="small"
            border
            v-horizontal-scroll="{bottom:42}"
          >
            <el-table-column label="序号" type="index" align="center" fixed>
            </el-table-column>
            <el-table-column label="SQL" align="center" prop="sql" :show-overflow-tooltip="true" fixed width="300"/>
            <el-table-column :label="langData(titleFirstToUpperCase('sample'))" align="center" prop="sample"
                             :show-overflow-tooltip="true" width="300"/>
            <el-table-column :label="langData(titleFirstToUpperCase(name))" align="center" :prop="name"
                             v-for="name in SqlBlackNames"
                             :key="name"
            />
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import {wall} from "@/api/druidMonitor";
import lang from "@/utils/datasourceLanguage";
import {titleFirstToLowerCase, titleFirstToUpperCase} from "@/utils";
import erd from "element-resize-detector";
import {AxiosResponse} from "axios";

@Component({
  name: "Wall",
})
export default class Wall extends Vue {
  private data: any = {};
  private defenseName: Array<string> = ["CheckCount", "HardCheckCount", "ViolationCount", "BlackListHitCount", "BlackListSize", "WhiteListHitCount", "WhiteListSize", "SyntaxErrrorCount"];
  private tableNames: Array<string> = ["selectCount", "selectIntoCount", "insertCount", "updateCount", "deleteCount", "truncateCount", "createCount", "alterCount", "dropCount", "replaceCount", "deleteDataCount", "deleteDataHisto", "updateDataCount", "updateDataHisto", "fetchRowCount", "fetchRowHisto"];
  private SqlWhiteNames: Array<string> = ["executeCount", "executeErrorCount", "fetchRowCount", "updateCount"];
  private SqlBlackNames: Array<string> = ["violationMessage", "executeCount", "fetchRowCount", "updateCount"];
  public functionName: Array<any> = [];
  titleFirstToLowerCase: any = titleFirstToLowerCase
  titleFirstToUpperCase: any = titleFirstToUpperCase

  /*获取数据*/
  getData() {
    wall().then((response: AxiosResponse) => {
      this.data = response.data;
      this.functionName = [];
      this.functionName.push({name: "函数名", invokeCount: "调用次数"});
      this.functionName.push(...this.data.functions)
    }).catch((e) => {
      console.error(e);
    });
  }

  langData(key: string) {
    return lang[key] ? lang[key][1] : key;
  }

  mounted() {
    this.onresize();
    this.getData();
  }

  $refs!: {
    wrapper: HTMLFormElement,
    dataTable2: HTMLFormElement,
    dataTable3: HTMLFormElement,
    dataTable4: HTMLFormElement,
    tableRow2: HTMLDivElement,
    tableRow3: HTMLDivElement,
    tableRow4: HTMLDivElement
  };

  onresize() {
    const container2 = this.$refs.dataTable2.$el;
    erd().listenTo(container2, () => {
      this.$nextTick(() => {
        if (this.$refs.tableRow2) {
          this.$refs.tableRow2.style.height = (this.$refs.dataTable2 && this.$refs.dataTable2.$el.clientHeight) + 'px';
        }
      })
    });
    const container3 = this.$refs.dataTable3.$el;
    erd().listenTo(container3, () => {
      this.$nextTick(() => {
        if (this.$refs.tableRow3) {
          this.$refs.tableRow3.style.height = (this.$refs.dataTable3 && this.$refs.dataTable3.$el.clientHeight) + 'px';
        }
      })
    });
    const container4 = this.$refs.dataTable4.$el;
    erd().listenTo(container4, () => {
      this.$nextTick(() => {
        if (this.$refs.tableRow4) {
          this.$refs.tableRow4.style.height = (this.$refs.dataTable4 && this.$refs.dataTable4.$el.clientHeight) + 'px';
        }
      })
    })
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/index.scss';

.wall {
  @include wh();

  .col-item {
    margin-bottom: 20px;
  }

  ::v-deep .el-descriptions__table {
    table-layout: fixed;
  }

  &-key, &-value {
    overflow: hidden; //超出宽度部分隐藏
    text-overflow: ellipsis; //超出部分显示省略号
  }

  &-key {
    cursor: pointer;
  }

  .tableRow {
    @include wh();
    position: relative;

    .dataTable {
      position: absolute;
    }
  }

  .el-tabs {
    @include wh();

    ::v-deep .el-tabs__content {
      height: calc(100% - 55px);
      padding-bottom: 5px;

      .el-tab-pane {
        @include wh();
      }
    }
  }
}
</style>
